<template>
    <div class="img-verify">
      <canvas width="120" height="40" ref="verify" @click="handleDrow"></canvas>
    </div>
  </template>
  
  <script setup>
  const { reactive, onMounted, ref } = require("vue");
  
  const verify = ref(null);
  const state = reactive({
    pool: "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
    imgCode: "",
  });
  
  onMounted(() => {
    // 开始生成验证码
    state.imgCode = draw();
    sendImgCode()
  });

  //抛出验证码
  const emits =  defineEmits(['sendImgCode'])
  const sendImgCode = ()=>{
    emits('sendImgCode',state.imgCode)
  }

  // 随机数
  const randomNum = (min, max) => {
    return parseInt(Math.random() * (max - min) + min);
  };
  
  // 随机生成颜色
  const randomColor = (min, max) => {
    const r = randomNum(min, max);
    const g = randomNum(min, max);
    const b = randomNum(min, max);
    return `rgb(${r},${g},${b})`;
  };
  
  const draw = () => {
    const ctx = verify.value.getContext("2d");
    ctx.fillStyle = randomColor(180, 230);
    ctx.fillRect(0, 0, 120, 40);
    let imgCode = "";
    for (let i = 0; i < 4; i++) {
      const text = state.pool[randomNum(0, state.pool.length)];
      imgCode += text;
      const fontSize = randomNum(18, 40);
      const deg = randomNum(-30, 30);
      
      ctx.font = fontSize + "px Simhei";
      ctx.textBaseline = "top";
      ctx.fillStyle = randomColor(80, 150);
      ctx.save();
      ctx.translate(30 * i + 15, 15);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(text, -5, -10);
      ctx.restore();
    }
    // 5.随机产生5条干扰线,干扰线的颜色要浅一点
    for (let i = 0; i < 5; i++) {
      ctx.beginPath();
      ctx.moveTo(randomNum(0, 120), randomNum(0, 40));
      ctx.lineTo(randomNum(0, 120), randomNum(0, 40));
      ctx.strokeStyle = randomColor(180, 230);
      ctx.closePath();
      ctx.stroke();
    }
    // 6.随机产生40个干扰的小点
    for (let i = 0; i < 40; i++) {
      ctx.beginPath();
      ctx.arc(
        randomNum(0, 120),
        randomNum(0, 40),
        1,
        0,
        2 * Math.PI
      );
      ctx.closePath();
      ctx.fillStyle = randomColor(150, 200);
      ctx.fill();
    }
    
    return imgCode;
  };

  const handleDrow = ()=>{
    state.imgCode = draw();
    sendImgCode()
  }
  </script>
  
  <style>

  </style>